<template>
    <view>
        <view class="leaderBoard flexBox">
            <view class="boss">
                <navigator class="" url="/subPages/square/bossLeaderboards/bossLeaderboards">老板排行榜</navigator>
            </view>
            <view class="level">
                <navigator class="" url="/subPages/square/rankLeaderboards/rankLeaderboards">等级排行榜</navigator>
            </view>
        </view>

        <view class="page flexBox">
            <view class="new">新鲜</view>
            <view class="recommended">推荐</view>
        </view>
        <hr class="hr" />
        <view class="contents">
            <view class="content">
                <view class="title flexBox">
                    <text class="titleText">{{ title }}</text>
                    <image src="@/static/img/guanbi.png" class="close"></image>
                </view>
                <view class="cont">{{ cont }}</view>
                <view class="imgs flexBox">
                    <image :src="img" class="image" v-for="(img, i) in images" :key="i"></image>
                </view>
                <hr class="hr" />
                <view class="bottomBox flexBox">
                    <view class="left flexBox">
                        <view class="icon">
                            <image :src="icon" class="face"> </image>
                        </view>
                        <view class="name">
                            <view class="userName">{{ userName }}</view>
                            <view class="sendDate">{{ sendDate }}</view>
                        </view>
                    </view>
                    <view class="right flexBox">
                        <image src="@/static/img/aixin_gray.png" class="aixin"></image>
                        <text>赞</text>
                    </view>
                </view>
                <hr class="hr" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: "来自寻找星空的爱恋烧烤园",
                cont: "在享受这道美食的时候，我仿佛来到了另一个世界。",
                userName: "寻找星空",
                sendDate: "刚才",
                icon: "https://cravatar.cn/avatar/952860ab80b171cd53247b56c0060940?s=40&r=G",
                images: [
                    require("@/static/img/xxxx.jpg"),
                    require("@/static/img/wo_active.png"),
                    require("@/static/img/yonghu.png")
                ],

            }
        },
        methods: {

        }
    }
</script>

<style>
    .leaderBoard,
    .page {
        justify-content: space-around
    }

    .boss,
    .level {
        width: 45vw;
        height: 25vw;
        border-radius: 15px;
        color: #fff;
        line-height: 25vw;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        margin: 15px 0;
    }

    .boss {
        background-color: #ee9eb7;
    }

    .level {
        background-color: #d5a8e3;
    }

    .new {
        border-bottom: 1vw solid #fd4b63;
    }

    .title {
        justify-content: space-between;
        padding: 3vw 0;
    }

    .close {
        width: 5vw;
        height: 5vw;
    }

    .titleText {
        font-weight: bold;
        color: #3a3a3a;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cont {
        color: #5b5b5b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .imgs {
        justify-content: flex-start;
        margin-top: 2vw;
    }

    .image {
        width: 30vw;
        height: 30vw;
        border-radius: 15px;
    }

    .bottomBox {
        justify-content: space-between;
        padding: 2vw 0;
    }

    .icon {
        margin-right: 2vw;
    }

    .face {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
    }

    .aixin {
        width: 5vw;
        height: 5vw;
        margin-right: 2vw;
    }

    .sendDate {
        color: #ccc;
        font-size: 3vw;
    }

    .right {
        align-items: center;
        color: #ccc;
    }

    .hr {
        background-color: #f7f7f7;
        height: 1px;
        border: none;
    }

    .content {
        padding: 0 4vw;
    }

    .flexBox {
        display: flex;
    }
</style>